<template>
  <div
    class="score-main"
    v-if="scoreinfo"
  >
    <van-divider contentPosition="center">{{ scoreinfo.title }}</van-divider>
    <div class="score-main-datetime">
      {{ scoreinfo.matchTime }}
    </div>
    <div class="score-info">
      <div
        class="score-info-left"
        v-if="scoreinfo.hostTeam"
      >
        <image
          class="score-info-logo"
          :src="scoreinfo.hostTeam.logo"
        />
        <div class="score-info-name">{{ scoreinfo.hostTeam.abbr }}</div>
      </div>
      <div class="score-info-mid">
        <div
          class="score-info-mid-score"
          v-if="scoreinfo.completed"
        >
          {{ scoreinfo.host_score }} : {{ scoreinfo.guest_score }}
        </div>
        <div
          class="score-info-mid-score"
          v-else
        >
          <van-tag
            plain
            type="warning"
            v-if="scoreinfo.matchStatus"
          >
            {{scoreinfo.matchStatus.text}}
          </van-tag>
        </div>
      </div>
      <div
        class="score-info-right"
        v-if="scoreinfo.guestTeam"
      >
        <image
          class="score-info-logo"
          :src="scoreinfo.guestTeam.logo"
        />
        <div class="score-info-name">{{ scoreinfo.guestTeam.abbr }}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    scoreinfo: {
      type: Object,
      default: null
    }
  }
}
</script>
<style lang="less" scoped>
.score-main {
  clear: both;
  text-align: center;
  background-color: #fff;
  padding: 10px 0px;
  &-datetime {
    color: #666;
    font-size: 13px;
  }
}
.score-info {
  padding: 0px 40px;
  display: flex;
  &-left {
    flex: 1;
    text-align: center;
  }
  &-mid {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    &-score {
      font-size: 22px;
      font-weight: 800;
      color: #333;
    }
  }
  &-right {
    flex: 1;
    text-align: center;
  }
  &-logo {
    width: 40px;
    height: 40px;
  }
  &-name {
    color: #333;
    font-size: 13px;
  }
}
</style>
